<template>
    <div class="dhzn_store">
        <!-- 店铺数据展示 搜索 分页 -->
        <div class="dhzn_s-content" v-if="pageingstate !== 1">
            <!-- 查找 -->
            <div class="d_s-c-query bcwh p10 mb10 br5 bs1g">
                <!-- <button type="button" class="bc4a wh p10 br5 mr10 mb10" @click="pageingstate = 1">添加企业门店</button> -->
                <el-form :model="storequery" ref="storequery" :rules="rules" label-width="50px" class="d_scq-form">
                    <el-form-item label='筛选' class="mt10 mb10">
                        <el-col :span="3">
                            <el-select v-model="storequery.state">
                                <el-option label="不限" value=""></el-option>
                                <el-option label="已冻结" value="0"></el-option>
                                <el-option label="正常" value="1"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="3">
                            <el-select v-model="storequery.select" @change="querystate('storequery');for(var i in storequery) i!=='state' && i!=='select'? storequery[i] = '' : ''">
                                <el-option label="门店名称" value="0"></el-option>
                                <el-option label="所在城市" value="1"></el-option>
                                <el-option label="门店归属" value="2"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item v-if="storequery.select === '0'" prop="name">
                                <el-input v-model="storequery.name" placeholder="请输入用户名后进行搜索" clearable></el-input>
                            </el-form-item>
                            <el-form-item v-else-if="storequery.select === '1'" prop="provinces">
                                <el-cascader class="search-cascader" :options="cityOptions" v-model="storequery.provinces" @change="changeProvince"></el-cascader>
                            </el-form-item>
                            <el-form-item v-else prop="belongType">
                                <el-select v-model="storequery.belongType">
                                    <el-option v-for="(item,key) in selectrole" :key="key" :label="item.type+'('+ (key+1) +'级)'" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="6" class="tc">
                            <el-button type="primary" @click="currentPage=1,pageingstate=2;requestquery('storequery')">搜索</el-button>
                            <el-button type="danger" @click="currentPage=1,pageingstate=0;requeststore(),querystate('storequery')">取消</el-button>
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>

            <!-- 列表 -->
            <div class="d_s-c-list bcwh p10 br5 bs1g">

                <div class="d_scl-title f16 bb1 b mb10"><span>添加店铺：</span><span @click="pageingstate = 1" class="f24 b00a vm"><i class="el-icon-circle-plus"></i></span></div>

                <table class="d_scl-table tc f14 mb30">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>头像</th>
                            <th>店铺<br><span class="ff53 n f12">*点店名看店铺会员</span></th>
                            <th>归属</th>
                            <!-- <th>所属级别</th> -->
                            <th>类型</th>
                            <th>状态</th>
                            <!-- <th>经纬度</th> -->
                            <th>余额</th>
                            <th>评分</th>
                            <th>所在城市</th>
                            <th>手机号</th>
                            <th>创建时间</th>
                            <th>介绍</th>
                            <th>详细地址</th>
                            <th>管理</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,key) in storelist" :key="key">
                            <td>{{item.id}}</td>
                            <td><img :src="item.logo" alt=""></td>
                            <td class="tl wsnw">名称：<br><span @click="checkmember(item.id)" class="b00a cup"> {{item.name}}</span><br><br>销量：<span class="ff53">{{item.totalSales}}</span></td>
                            <td class="tl wsnw">级别：<br><span class="b00a"> {{item.belongType| filclassify}}</span><br><br>ID：<span class="ff53">{{item.belongId}}</span></td>
                            <!-- <td>{{item.belongType}}</td> -->
                            <td>{{item.type | filtertype}}</td>
                            <td>{{item.state | filterstate}}</td>
                            <!-- <td>{{item.longitude}}-{{item.latitude}}</td> -->
                            <td>{{item.balance}}</td>
                            <td>{{item.score}}</td>
                            <td>{{item.city}}</td>
                            <td>{{item.phone}}</td>
                            <td>{{item.createTime*1000 | formatDate}} {{item.createTime*1000 | formatDateBehind}}</td>
                            <td class="d_sclt-bodytr"><p>{{item.description}}</p></td>
                            <td class="d_sclt-bodytr">{{item.address}}</td>
                            <td>
                                <button type="button" @click="storeupdialog=true;for(var i in storeupdata) i!=='state' ? storeupdata[i]=item[i] : storeupdata[i]=String(item[i]);storeupdata.key=key" class="bc4a br5 pt5 pb5 wh f14 wsnw"><i class="el-icon-edit"></i>编辑</button>
                                <button type="button" @click="requestfrost(item,key)" class="bcfd wh br5 p5 wh f14 wsnw">冻结<i class="el-icon-close"></i></button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <!-- 分页 -->
                <div class="d_scl-block">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-size="pagesize"
                        layout="total, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </div>

                <!-- 弹窗 -->
                <el-dialog title="编辑" :visible.sync="storeupdialog" width="500px">
                    
                    <el-form v-model="storeupdata" ref="storeupdata" label-width="80px" size="mini">
                        <el-form-item label="店铺名称">
                            <el-col :span="12"><el-input v-model="storeupdata.name" clearable placeholder="请填写新的店铺名称" cl></el-input></el-col>
                        </el-form-item>

                        <el-form-item label="头像">
                            <el-col :span="12"><el-input v-model="storeupdata.logo" placeholder="上传新的图片" clearable></el-input></el-col>
                            <el-col :span="8"><span class="dialog-img"><img v-if="storeupdata.logo !== ''" :src="storeupdata.logo" alt=""></span></el-col>
                        </el-form-item>

                        <el-form-item label="店铺状态">
                            <el-select v-model="storeupdata.state" clearable>
                                <el-option label="冻结" value="0"></el-option>
                                <el-option label="正常" value="1"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="店铺介绍">
                            <el-col :span="18"><el-input type="textarea" v-model="storeupdata.description" placelder="请填写新的介绍" clearable></el-input></el-col>
                        </el-form-item>
                    </el-form>

                    <span slot="footer">
                        <el-button @click="storeupdialog=false" size="mini">取 消</el-button>
                        <el-button type="primary" @click="requestupdate(),storeupdialog=false" size="mini">确 定</el-button>
                    </span>
                </el-dialog>
            </div>

        </div>

        <!-- 添加店铺 -->
        <div class="dhzn_s-add bs1g" v-else>
            <div class="bb1 p10 bcwh">
                <span class="vm ff53 f24 b mr10" @click="pageingstate=0"><i class="el-icon-close"></i></span>添加店铺：
                <span class="ff53 f14">*经纬度请点击获取后复制，(当前坐标的"，"前的是经度，后面是纬度)</span>
            </div>
            <div class="bcwh p20">
                <el-form :model="storeadd" ref="storeadd" :rules="rules" label-width="80px">
                    <!-- 店铺归属 -->
                    <el-form-item label="店铺归属">
                        <el-col :span="5">
                            <el-form-item prop="belongType">
                                <el-select v-model="storeadd.belongType" @change="classifyman" clearable placeholder="请选择店铺归属">
                                    <el-option v-for="(item,key) in selectrole" :key="key" :label="item.type+'('+ (key+1) +'级)'" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" v-if="storeadd.belongType !== ''">
                            <el-form-item label="归属人" prop="belongId">
                                <el-select v-model="storeadd.belongId" clearable placeholder="请选择店铺的归属人">
                                    <el-option v-for="(item,key) in selectname" :key="key" :label="item.name+'('+ (key+1) +'级)'" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-form-item>

                    <!-- 选择店铺类型 -->
                    <el-form-item label="店铺类型" prop="type">
                        <el-select v-model="storeadd.type" clearable placeholder="请选择店铺类型">
                            <el-option label="实体店(线下)" value="0"></el-option>
                            <el-option label="网络店(线上)" value="1"></el-option>
                        </el-select>
                    </el-form-item>

                    <!-- 经纬度 -->
                    <el-form-item label="经纬度">
                        <el-col :span="2">
                            <el-form-item prop="longitude">
                                <el-input v-model="storeadd.longitude" placeholder="经度"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="1" class="tc">-</el-col>
                        <el-col :span="2">
                            <el-form-item prop="latitude">
                                <el-input v-model="storeadd.latitude" placeholder="纬度"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-button onclick="window.open ('https://lbs.qq.com/tool/getpoint/index.html', 'newwindow', 'height=980, width=1100, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')">获取经纬度</el-button>
                        <a class="bor1 br5 p10 ml10" target="_blank" href="https://lbs.qq.com/tool/getpoint/index.html">获取经纬度</a>
                    </el-form-item>

                    <!-- 店铺名称 -->
                    <el-form-item label="店铺名称" prop="name">
                        <el-col :span="6"><el-input v-model="storeadd.name" placeholder="请填写店铺名称" clearable></el-input></el-col>
                    </el-form-item>

                    <!-- 手机号码 -->
                    <el-form-item label="手机号码" prop="phone">
                        <el-col :span="6"><el-input v-model="storeadd.phone" placeholder="请填写店铺联系方式(手机)" clearable></el-input></el-col>
                    </el-form-item>

                    <!-- 店铺头像 -->
                    <el-form-item label="店铺头像" prop="logo">
                        <el-col :span="6"><el-input v-model="storeadd.logo" placeholder="请填写店铺头像" clearable></el-input></el-col>
                    </el-form-item>
                    
                    <!-- 所在城市 -->
                    <el-form-item label="所在城市" prop="provinces">
                        <el-cascader :options="cityOptions" v-model="storeadd.provinces"  placeholder="请选择店铺所在的城市" clearable @change="changeProvince"></el-cascader>
                    </el-form-item>
                    
                    <!-- 详细地址 -->
                    <el-form-item label="详细地址" prop="address">
                        <el-col :span="6"><el-input :disabled="storeadd.provinces=='' ? true : false" v-model="storeadd.address" placeholder="请填写店铺详细地址" clearable></el-input></el-col>
                    </el-form-item>

                    <!-- 店铺介绍 -->
                    <el-form-item label="店铺介绍" prop="description">
                        <el-col :span="10"><el-input type="textarea" v-model="storeadd.description" placeholder="请填写店铺简介..." clearable></el-input></el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="requestadd('storeadd')">添加</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

    </div>
</template>

<script>
// 省市区的级联选择器数据
import cityOptions from '../js/city_data2017_element.js'
import {formatDate} from '../js/time.js'
let axios = require('axios')
let that
export default {
    components: {},
    data() {
        return {
            token: '',
            pageingstate: 0,
            storelist: [],
            // 查询的绑定对象
            storequery: {
                select: '0',
                state: '',
                name: '',
                belongType: '',
                city: '',
                provinces: '',
            },
            // 店铺归属的等级
            selectrole:[
                {id:0,type:'合伙人'},
                {id:1,type:"企业"},
                {id:2,type:"普通门店老板"},
                {id:3,type:'企业经销商'},
                {id:4,type:"企业门店老板"},
                {id:5,type:"普通门店店员"},                
                {id:6,type:"企业门店店员"},
                {id:7,type:'普通用户'}
            ],
            // 验证
            rules:{
                name:[
                    {required:true,message:'请输入门店名称',trigger:'blur'}
                ],
                provinces:[
                    {required:true,message:'请选择门店所在省市区',trigger:'change'}
                ],
                belongType: [
                    {required:true,message:'请选择门店归属',trigger:'blur'}
                ],
                belongId: [
                    {required:true,message:'请选择门店归属级别',trigger:'blur'}
                ],
                type: [
                    {required:true,message:'请选择门店归属人',trigger:'blur'}
                ],
                longitude: [
                    {required:true,message:'请填写经度',trigger:'blur'}
                ],
                latitude: [
                    {required:true,message:'请填写纬度',trigger:'blur'}
                ],
                phone: [
                    {required:true,message:'请填写店铺联系电话',trigger:'blur'}
                ],
                description: [
                    {required:true,message:'请填写店铺介绍',trigger:'blur'}
                ],
                logo: [
                    {required:true,message:'请添加店铺的头像',trigger:'blur'}
                ],
                address: [
                    {required:true,message:'请在省市区后填写信息的地址',trigger:'blur'}
                ],
            },
            // 添加绑定对象
            storeadd: {
                belongId: '',
                belongType: '',
                type: '',
                longitude: '',
                latitude: '',
                name: '',
                provinces: '',
                city: '',
                phone: '',
                description: '',
                logo: '',
                address: ''
            },
            // 修改编辑
            storeupdata: {
                id: '',
                name: '',
                logo: '',
                state: '',
                description: '',
                key:''
            },
            selectname: '',
            currentPage: 1,						//分页的默认页数
            pagesize: 10,                       //单页条数
            total: 0,						   //总条数
            storeupdialog: false,              //弹出层的状态
            cityOptions: cityOptions           //全国的省市区的级联选择器的数据引入绑定
        };
    },
    filters: {
        filclassify(type){
            that.selectrole.forEach((item)=>{
                item.id === type ? type = item.type : '';
            })
            return type
        },
        // 时间戳过滤器
        formatDate(time){
            var date = new Date(time);
            return formatDate(date,'yyyy-MM-dd')
        },
        formatDateBehind(time){
            var date = new Date(time);
            return formatDate(date,'hh:mm:ss')
        },
        // 状态
        filterstate(state){
            if(state === 0){
                state = '冻结'
            }else{state = '正常'}
            return state
        },
        // 店铺类型
        filtertype(type){
            if(type === 0){
                type = '实体店'
            }else if(type === 1){
                type = '网店'
            }else{return}
            return type
        }
    },
    computed: {},
    watch: {},
    methods: {
        // 请求店铺列表
        requeststore(){
            let that = this;
            let updata = JSON.stringify({current: that.currentPage,size: that.pagesize})
            console.log(updata)
            axios({
                method: 'post',
                url: '/api/shop/list',
                headers: {
                    'Content-Type': 'application/json',
                    'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                },
                data: updata
            }).then( resp=> {
                console.log('店铺',resp)
                that.storelist = resp.data.data;
                that.total = resp.data.code;
            }).catch( err=> {console.log(err)})
        },

        // 单页条数
        handleSizeChange(val){
            that.pagesize = val;
            if(that.pageingstate === 0){
                that.requeststore()
            }else{that.requestquery('storequery')}
        },

        // 页数
        handleCurrentChange(val){
            that.currentPage = val;
            if(that.pageingstate === 0){
                that.requeststore()
            }else{that.requestquery('storequery')}
        },

        // 处理城市的级联选择器
        changeProvince(){
            //过滤出想要的地区字段，要市，同级的有行政区和综合性的台湾省三种
            if(that.pageingstate === 1){
                that.storeadd.address = '';
                that.storeadd.provinces.forEach(ment => {
                    if(ment.charAt(ment.length-1) === '市' || ment.substring(ment.length-3) === '行政区' || ment === '台湾省'){
                        that.storeadd.city = ment
                    }
                    that.storeadd.address += ment;
                });
            }else{
                that.storequery.provinces.forEach(ment => {
                    if(ment.charAt(ment.length-1) === '市' || ment.substring(ment.length-3) === '行政区' || ment === '台湾省'){
                        that.storequery.city = ment
                    }
                });
            }  
        },

        // 条件查找
        requestquery(verify){
            this.$refs[verify].validate((valid)=>{
                if(valid){
                    let data = {current: that.currentPage,size: that.pagesize};
                    for(var i in that.storequery)i!=='select' && i!=='provinces' && that.storequery[i]!=='' ? data[i] = that.storequery[i] : '';
                    let updata = JSON.stringify(data)
                    // console.log(data)
                    axios({
                        method: 'post',
                        url: '/api/shop/list',
                        headers: {
                            'Content-Type': 'application/json',
                            'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                        },
                        data: updata
                    }).then( resp=> {
                        console.log(resp)
                        if(resp.data.message === '请求成功'){
                            that.storelist = resp.data.data;
                            that.total = resp.data.code;
                            resp.data.code === 0 ? (
                                this.$message('没有相关的数据，尝试添加后再次搜索')
                            ) : (
                                this.$message({
                                    message: '成功为您找到'+resp.data.code+'家店铺',
                                    type: 'success'
                                })
                            )
                        }else{this.$message.error('失败！请尝试刷新或重新登录后再次操作')}
                    }).catch( err=> {console.log(err)})
                }else{this.$message.error('请输入想要搜索的关键字')}
            })
        },

        // 查询的状态清除
        querystate(clear){
            this.$refs[clear].resetFields();
        },

        // 添加店铺
        requestadd(verify){
            this.$refs[verify].validate((valid)=>{
                if(valid){
                    let data = {totalSales:0,balance:0,score:0,state:1,};
                    for(var i in that.storeadd) i!=="provinces" ? data[i] = that.storeadd[i] : '';
                    let updata = JSON.stringify(data);
                    console.log(data,updata)
                    axios({
                        method: 'post',
                        url: '/api/shop/add',
                        headers:{ 
                            'Content-Type': 'application/json',
                            'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                        },
                        data: updata
                    }).then( resp=> {
                        console.log(resp)
                        if(resp.data.message==="请求成功"){
                            data.id = resp.data.data;
                            that.storelist.push(data)
                            that.total += 1;
                            that.pageingstate = 0;
                        }else{}
                    }).catch( err=> {console.log(err)})
                }else{return}
            })
            
        },

        // 修改
        requestupdate(){
            let data = {};
            for(var t in that.storeupdata) that.storeupdata[t] !== '' && t !== 'key' ? data[t] = that.storeupdata[t] : '';
            let updata = JSON.stringify(data);
            console.log(updata,data)
            axios({
                method: 'post',
                url: '/api/shop/update',
                headers:{ 
                    'Content-Type': 'application/json',
                    'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                },
                data: updata
            }).then( resp=> {
                console.log(resp)
                if(resp.data.message === '请求成功'){
                    let key = that.storeupdata.key;
                    console.log(key)
                    for(var i in data) i==='state' ? that.storelist[key][i] = String(data[i]) : that.storelist[key][i] = data[i];
                }else{}
            }).catch(err=> {console.log(err)})
        },

        //根据角色匹配出对应角色的所有人
        async classifyman(){
            let url;
            // 每次改变角色重置选择的人
            that.storeadd.belongId = '';
            // 根据选择的角色调用相应的接口
            switch(that.storeadd.belongType){
                case 0: url = '/api/partner/list';
                break;
                case 1: url = '/api/enterprise/list';
                break;
                case 2: url = '/api/generalStoresBoss/list';
                break;
                case 3: url = '/api/dealer/list';
                break;
                case 4: url = '/api/storesBoss/list';
                break;
                case 5: url = '/api/generalClerk/list';
                break;
                case 6: url = '/api/storeClerk/list';
                break;
                default: url = '/api/user/list';break;
            }
            // 循环拿到全部值，用map提取想要的字段导入到新数组
            for(var u=0;u<2;u++){
                let total = 100;
                let data = {current:1,size:total};
                let updata = JSON.stringify(data);
                await axios({
                    method: 'post',
                    url: url,
                    headers: {
                        'Content-Type': 'application/json',
                        'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                    },
                    data: updata
                }).then( resp=> {
                    console.log(resp)
                    if(u===0){
                        resp.data.message === '请求成功' && resp.data.code <= 10 ? (
                            that.selectname = resp.data.data.map((item)=>{
                                if(that.storeadd.belongType === 7){
                                    return {
                                        id: item['id'],
                                        name: item['nickname']
                                    }
                                }else{
                                    return {
                                        id: item['id'],
                                        name: item['name']
                                    }
                                }
                            }),u=2
                        ) : total = resp.data.code;
                    }else{
                        that.selectname = resp.data.data.map((item)=>{
                            if(that.storeadd.belongType === 7){
                                return {
                                    id: item['id'],
                                    name: item['nickname']
                                }
                            }else{
                                return {
                                    id: item['id'],
                                    name: item['name']
                                }
                            }
                        })
                    }
                }).catch( err=> {console.log(err)})
            }
            console.log(that.selectname)
        },

        // 一键冻结
        requestfrost(item,key){
            // let data = {id:item.id,state:0}
            if(item.state === 0){
                this.$message.error('店铺已冻结请不要重复提交！')
            }else{
                let updata = JSON.stringify({id:item.id,state:0})
                axios({
                    method: 'post',
                    url: '/api/shop/update',
                    headers: {
                        'Content-Type': 'application/json',
                        'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                    },
                    data: updata
                }).then( resp=>{ 
                    console.log(resp)
                    if(resp.data.message === '请求成功'){
                        that.storelist[key].state = 0;
                        this.$message({
                            message: '修改成功!',
                            type: 'success'
                        })
                    }else{}
                }).catch( err=> {console.log(err)})
            }
        },

        // 保留位置
        checkmember(id){
        //     this.$router.push({
        //     name:"shopvip",
        //     // params:{
        //     //   id:id
        //     // }
        //   })
            this.$router.push({name:'shopvip',query:{'id':id}})
        },

        newtoken(){
            let that = this;
            let axios = require('axios')
			let loguser = JSON.parse(sessionStorage.getItem('updata'))
			let data = {username:loguser.username, password:loguser.password};
			let updata = JSON.stringify(data);
			console.log(updata)
			axios({
				method: 'post',
				url: '/api/getAuthority/manager',
				headers: { 'Content-Type': 'application/json' },
				data: updata
			})
			.then( resp=> {
                that.token = resp.data.data;
				sessionStorage.setItem("token", JSON.stringify(resp.data.data))        
                that.requeststore()
			}).catch( err=> {})
        }
    },
    created() {},
    mounted() {
        let that = this;
        that.newtoken()
    },
    beforeCreate() {
        that = this;
    },
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    }
</script>
<style scoped>
.dhzn_store{
    height: calc(100% - 56px);
    box-sizing: border-box;
}
.dhzn_s-content{
    height: 100%;
}
/* 查询搜索 */
.search-cascader{
    width: 100%;
}
/* .d_scq-form .el-form-item{
    margin: 10px 0;
} */
/* 表单数据 */
.d_s-c-list{
    position: relative;
    height: calc(100% - 90px);
    box-sizing: border-box;
}
.d_scl-table{
    width: 100%;
    color: #666666;
    border-bottom: 1px solid #e0e0e0;
    border-left: 1px solid  #e0e0e0;
    border-collapse: collapse;
}
.d_scl-table thead tr,.d_scl-table tbody tr:hover{
    background-color: #F2F2F2;
}
.d_scl-table th, .d_scl-table td{
    min-height: 50px;
    padding: 10px;
    border-top: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
}
.d_scl-table tr td img{
    max-width: 120px;
    max-height: 80px;
}
/* 店铺的介绍布局 */
.d_sclt-bodytr{
    min-width: 120px;
    text-align: left;
}
.d_sclt-bodytr p{
    max-width: 240px;
    overflow:hidden; 
    text-indent: 2em;
    text-overflow:ellipsis;
    display:-webkit-box;
    /* autoprefixer: off */
    -webkit-box-orient:vertical;
    /* autoprefixer: on */
    -webkit-line-clamp:3; 
}
/* 分页位置 */
.d_scl-block{
    position:absolute;
    top: calc(100% - 40px);
}

/* 弹窗 */
.dialog-img{
    display: inline-block;
    width: 100px;
    height: 80px;
    overflow: hidden;
    margin: 3px;
    border-radius: 5px;
    border: 1px dotted #757575;
}
.dialog-img img{
    border-radius: 5px;
    /* max-width: 100%; */
    width: 100%;
    height: 100%;
}
</style>